<!--  -->
<template>
  <div class="product-detail">
    <van-swipe class="my-swipe"
               :autoplay="3000"
               indicator-color="white">
      <van-swipe-item v-for="(item,index) in gallery"
                      :key="index">
        <img :src="item.img_url"
             alt=""
             width="100%"
             style="display:block">
      </van-swipe-item>
    </van-swipe>
    <tips></tips>
    <div class="info">
      <div class="title">{{info.name}}</div>
      <div class="goods_brief">{{info.goods_brief}}</div>
      <div class="retail_price">{{info.retail_price|fomartPrice}}</div>
    </div>
    <van-cell title="展示弹出层"
              is-link
              @click="isSkuShow=true" />
    <!-- 商品参数 -->
    <div class="attribute">
      <h3>商品参数</h3>
      <ul>
        <li v-for="(item,key) in attribute"
            :key="key">
          <div class="left">{{item.name}}</div>
          <div class="right van-ellipsis">{{item.value}}</div>
        </li>
      </ul>
    </div>
    <!-- 商品图片 -->
    <div class="goods-img"
         v-html="goods_desc"></div>
    <!-- 常见问题 -->
    <div class="desc-bottom">
      <div class="title">
        <span>常见问题</span>
      </div>
      <ul class="issue">
        <li v-for="(item,index) in issue"
            :key="index">
          <h3>{{item.question}}</h3>
          <p>{{item.answer}}</p>
        </li>
      </ul>
      <div class="title">
        <span>大家都在看</span>
      </div>
      <product :goodsList="goodsList"></product>
    </div>
    <app-goods-action @goToCart="goToCart"
                      :goodsCount="goodsCount"></app-goods-action>
    <!-- 下面是sku组件 -->
    <van-sku ref="sku"
             v-model="isSkuShow"
             :sku="sku"
             :goods="goods"
             :hide-stock="sku.hide_stock" />
  </div>

</template>

<script>
import { getProductDetail, getRelateProduct, getGoodsCount, addToCart } from "@/request/api.js"
import Tips from "@/components/Tips.vue"
import Product from "@/components/Product.vue"
import AppGoodsAction from "@/components/AppGoodsAction.vue"


export default {
  components: {
    Tips,
    Product,
    AppGoodsAction
  },
  data () {
    return {
      //---------------上面是sku信息---------------------
      isSkuShow: false,
      sku: {
        tree: [

        ],
        hide_stock: false,// 是否隐藏剩余库存
        price: '1000', // 默认价格（单位元）
        stock_num: 227, // 商品总库存
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: 'https://cn.vuejs.org/images/logo.png',
      },
      //--------------下面是商品详情----------------------
      id: '',
      //商品详情图
      gallery: [],
      //商品信息
      info: [],
      //商品参数
      attribute: [],
      //商品图片信息
      goods_desc: "",
      //常见问题
      issue: [],
      //相关产品列表
      goodsList: [],
      //购物车产品数量
      goodsCount: 0,
      //productList数据
      productList: []
    }
  },

  methods: {
    goToCart () {
      /* 
      1.如果sku在没有展示的情况下，点击购物车展示sku遮罩层
      2.如果sku在展示情况下，则跳转到购物车
      */
      if (this.isSkuShow) {
        //跳转到购物车
        // 选择的商品数量
        //console.log(this.$refs.sku.getSkuData().selectedNum,);
        addToCart({
          goodsId: this.$route.query.id,
          productId: this.productList[0].id,
          number: this.$refs.sku.getSkuData().selectedNum
        }).then(res => {
          if (res.errno == 0) {
            console.log(res.data);
            /* 
        添加到购物车后需要做的事情：
        1.更新购物车数量
        2.提示加入成功
        3.跳转到购物车
        */
            this.goodsCount = res.data.cartTotal.goodsCount;
            this.$toast.success("加入购物车成功");
            setTimeout(() => {
              this.$router.push("/cart");
            }, 1000);
          }
        })

      } else {
        this.isSkuShow = true;
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {
    /* 
    接收queryString的方式传过来的id
    */
    this.id = this.$route.query.id;
    //1.获取产品详情
    getProductDetail({ id: this.id }).then((res) => {
      if (res.errno == 0) {
        console.log(res.data);
        //-----------商品详情数据-----------------
        this.gallery = res.data.gallery;
        this.info = res.data.info;
        this.attribute = res.data.attribute;
        this.goods_desc = res.data.info.goods_desc;
        this.issue = res.data.issue;
        //----------------商品sku数据----------------------------
        this.goods.picture = res.data.info.list_pic_url;
        this.sku.price = res.data.info.retail_price;
        this.sku.stock_num = res.data.info.goods_number;
        //-------------------productList------------------------
        this.productList = res.data.productList;
      }
    }).catch(err => {
      console.log(err);
    })
    //2.获取产品详情里的相关产品
    getRelateProduct({ id: this.id }).then(res => {
      if (res.errno == 0) {
        //console.log(res.data);
        this.goodsList = res.data.goodsList;
      }
    }).catch(err => {
      console.log(err);
    })
    //3.获取狗驱车商品数量
    getGoodsCount().then(res => {
      if (res.errno == 0) {
        //console.log(res);
        this.goodsCount = res.data.cartTotal.goodsCount;
      }
    }).catch(err => {
      console.log(err);
    })
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style lang="less" scoped>
.product-detail {
  background-color: #efefef;
  .info {
    background-color: #fff;
    text-align: center;
    line-height: 40px;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    .title {
      font-size: 20px;
    }
    .retail_price {
      color: darkred;
    }
  }
  .attribute {
    background-color: #fff;
    margin-top: 20px;
    padding: 10px 15px;
    h3 {
      line-height: 50px;
      font-size: 17px;
    }
    li {
      height: 40px;
      line-height: 40px;
      background-color: #efefef;
      display: flex;
      margin-bottom: 10px;
      border-radius: 5px;
      .left {
        width: 30%;
        /* flex: 3; */
        text-align: right;
        margin-right: 10px;
        font-size: 12px;
      }
      .right {
        font-size: 16px;
        flex: 1;
      }
    }
  }
  /* 
深度样式写法：穿透UI组件的样式，直接添加在标签上
*/
  /deep/.goods-img {
    img {
      width: 100%;
      display: block;
    }
  }
  .desc-bottom {
    background-color: #fff;
    .title {
      width: 100%;
      background: #fff;
      height: 50px;
      position: relative;
      &::before {
        content: "";
        width: 50%;
        height: 2px;
        background: #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -1px;
        margin-left: -25%;
      }
      span {
        width: 30%;
        position: relative;
        background: #fff;
        display: block;
        text-align: center;
        margin: 0 auto;
        height: 50px;
        line-height: 50px;
      }
    }
    .issue {
      width: 90%;
      margin-left: 30px;
      list-style-type: disc;

      h3 {
        text-align: left;
        margin: 10px;
      }
      p {
        font-size: 12px;
        color: rgb(105, 99, 99);
      }
    }
  }
}
</style>